<template>
	<div>
		<a-list size="small" bordered :dataSource="fileList">
			<div slot="header">
				<a-button :disabled="singleFile && fileList.length > 0" @click="uploadFile" style="width: 100%" type="dashed" >{{
					data ? '上传' + data.fieldAliase : uploadBtnText
				}}</a-button>
			</div>
			<a-list-item slot="renderItem" slot-scope="item, index" :key="index">
				<div style="width: 90%">{{ item.audioName }}</div>
				<div>
					<a-popconfirm
						title="确定要删除该文件吗？"
						@confirm="removeFile()"
						okText="确认"
						cancelText="取消"
					>
						<a-tag color="red">删除</a-tag>
					</a-popconfirm>
					<!--  <a-tag color="green" @click="previewOpen(item)">预览</a-tag> -->
				</div>
			</a-list-item>
		</a-list>
		<simple-vue-upload :ref="data.fieldCode" @uploadOk="uploadOk" />
		<a-modal :visible="previewVisible" :footer="null" @cancel="previewCancel">
			<video :src="fileSrc" width="100%" controls="controls" autoplay="autoplay">您的浏览器不支持视频预览。</video>
		</a-modal>
	</div>
</template>

<script>
import store from '@/store'
import { DEFAULT_SITE } from '@/store/mutation-types'
import storage from 'store'
import SimpleVueUpload from '@/components/SimpleVueUpload/SimpleVueUpload.vue'
import { deleteFile } from '@/api/site/upload.js'
export default {
	name: 'FileUploadList',
	components: {
		SimpleVueUpload,
	},
	props: {
		uploadBtnText: {
			type: String,
			default: '文件上传',
		},
		data: {
			type: Object,
			required: true,
		},
		fieldName: {
			type: String,
			default: '',
		},
		singleFile: {
			type: Boolean,
			default: false,
		},
	},
	data() {
		return {
			fileList: [],
			previewVisible: false,
			fileSrc: null,
			headers: {
				Authorization: 'bearer  ' + store.getters.token,
				'Default-Site': storage.get(DEFAULT_SITE),
			},
		}
	},
	created() {},
	methods: {
		uploadFile() {
			this.$refs[this.data.fieldCode].openUpload('/*')
		},
		uploadOk(response) {
			// console.log('ok')
			// console.log(response)
			if (response.code === 0) {
				const file = response.res
				if (file) {
					const fileObj = {
						// uid: file.fileUid,
						// fileUid: file.fileUid,
						// name: file.fileName,
						// status: 'done',
						// url: file.fileFullPath,
						url: file.url,
            			audioName:file.audioName
					}
					this.fileList.push(fileObj)
				}
			}
		},
    removeFile(){
      console.log(11111);

      this.fileList = []
    },
		// removeFile(fileUid) {
		// 	if (fileUid) {
		// 		deleteFile({
		// 			fileUid: fileUid,
		// 		}).then((response) => {
		// 			if (response.code === 0) {
		// 				const fileList = this.fileList.filter((item) => fileUid !== item.fileUid)
		// 				if (fileList) {
		// 					this.fileList = fileList
		// 				}
		// 				console.log('delete file success')
		// 			}
		// 		})
		// 	}
		// },
		setFieldValue(value) {
			if (value && value instanceof Array) {
				this.fileList = value
			} else {
				this.fileList = []
			}
		},
		getFieldValue() {
			return this.fileList || []
		},
		fieldClear() {
			this.fileList = []
		},
		previewOpen(item) {
			console.log(item)
			this.previewVisible = true
		},
		previewCancel() {
			this.previewVisible = false
		},
	},
}
</script>
